/* eslint-disable react-hooks/exhaustive-deps */
import { Empty } from 'antd'
import React, { useContext, useEffect } from 'react'
import styles from './index.less'
import ReactEcharts from 'echarts-for-react';
import { getInfoLive } from '@/services/student';
import { useState } from 'react';
import { CourseContext } from '../../..';
import { echartOption } from '@/utils/echartsUtils';

export default function Course() {
  const [dataInfo, setDataInfo] = useState<any>();
  const ctx = useContext(CourseContext);

  useEffect(() => {
    (async () => {
      const res = await getInfoLive({ activityId: ctx.courseId, uid: ctx.uid })
      setDataInfo(res.result);
    })()
  }, [ctx])
  const data1: any = []
  data1.push({ value: dataInfo?.liveAttendanceCount, name: `直播到课`, color: "green" })
  data1.push({ value: dataInfo?.videoAttendanceCount, name: `回放到课`, color: "yellow" })
  data1.push({ value: dataInfo?.missLiveCount, name: `缺勤`, color: "grey" })


  return (
    <div style={{ position: 'relative', flex: 1 }}>
      <div style={{ fontSize: '18px', fontWeight: 'bold', left: "50%", transform: 'translateX(-50%)', position: 'absolute' }}>直播到课率</div>
      {
        !dataInfo?.liveTotalCount || dataInfo?.liveTotalCount == 0 ? <Empty description={'直播课还没有开始哦'} style={{ position: "relative", top: "50%", transform: 'translateY(-50%)' }} image={Empty.PRESENTED_IMAGE_SIMPLE} /> : <>
          <ReactEcharts notMerge option={echartOption(data1)} style={{ margin: 'auto', minHeight: '400px' }} />
          <div className={styles.title_font} >已上{dataInfo?.liveAttendanceCount + dataInfo?.videoAttendanceCount}节直播课</div>
        </>
      }

    </div>
  )
}





